
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Show Geocoded Tweets</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAl41B4LVy3qJUj-JbnPK3HBSr-NUsf9xrGbPTfPu5KGoAPzM_cxTyxApuWMtJuS3lHkfRHiYbZV_A9g"></script>
    <script type="text/javascript" charset="utf-8" src="js/mxn.js?(google)"></script>
    <script src="js/mxn.google.geocoder.js"></script>

    <style>
    div#mymap {
        width: 600px;
        height: 400px;
    }
    </style>
    <script type="text/javascript">
    google.load("maps", "2");

    var geocode_cache = {};
    var mapstraction;
    function create_map() {
        mapstraction = new mxn.Mapstraction('mymap', 'google');
        mapstraction.addSmallControls();

        var pos = google.loader.ClientLocation;
        if (pos) {
          var posloc = new mxn.LatLonPoint(pos.latitude, pos.longitude);
          var cityname = pos.address.city + ", " + pos.address.region;
          get_twitter_geo(posloc, 5);
          mapstraction.setCenterAndZoom(posloc, 11);
          
          document.getElementById('loc').value = cityname;
          geocode_cache[cityname] = posloc;
        }
        else {
          mapstraction.setCenterAndZoom(new mxn.LatLonPoint(40, -92), 3);
        }
    }
    function get_twitter_geo(loc, rad, kw, pg, rpp) {
      // Set default values
      if (rpp == null) {
        rpp = 100;
      }
      if (rad == null) {
        rad = 5; // radius in miles
      }
      // Clear the map on first page
      if (pg == null || pg == 1) {
        pg = 1;
        mapstraction.removeAllMarkers();
        mapstraction.removeAllPolylines();
        polygon_circle(loc, rad);
      }
      mapstraction.autoCenterAndZoom();
      
      // Construct URL
      var url = "http://search.twitter.com/search.json?page=" + pg;
      if (kw != null && kw != "") {
        url += "&q=" + kw;
      }
      url += "&geocode=" + loc.lat + "," + loc.lon + "," + rad + "mi" + "&rpp=" + rpp + "&callback=?";

      $.getJSON(url, function(jobj) {
        var resarray = jobj.results;
        for (var i=0; i<resarray.length; i++) {
          var res = resarray[i];
          if (res.geo) {
            var coords = res.geo.coordinates;
            var mk = new mxn.Marker(new mxn.LatLonPoint(coords[0], coords[1]));
            mk.setInfoBubble(res.text);
            mapstraction.addMarker(mk);
          }
        }
        if ((pg * rpp) < 1500 && resarray.length == rpp) {
          get_twitter_geo(loc, rad, kw, pg+1, rpp);
        }
        else {
          //alert('ended on pg ' + pg + ' with ' + mapstraction.markers.length + ' markers.');
        }
    });
    }
    function call_twitter_geo(loc) {
      mapstraction.setCenterAndZoom(loc.point, 11);
      var kw = document.getElementById('keyword').value;
      var radobj = document.getElementById('radius');
      var rad = radobj.options[radobj.selectedIndex].value;
      get_twitter_geo(loc.point, rad, kw, 1, 100);
      var loctxt = document.getElementById('loc').value;
      if (loctxt != "") {
        geocode_cache[loctxt] = loc.point;
      }
    }
    function geocode_form() {
      geocoder = new MapstractionGeocoder(call_twitter_geo, 'google');
      var loctxt = document.getElementById('loc').value;
      if (loctxt == "") {
        call_twitter_geo({point: mapstraction.getCenter()});
      }
      else {
        var storedloc = geocode_cache[loctxt];
        if (storedloc) {
          call_twitter_geo({point: storedloc});
        }
        else {
          var address = { address: loctxt };
          geocoder.geocode(address);
        }
      }
    }
    function polygon_circle(center, radius) {
      var rad = new mxn.Radius(center, 10);
      var poly = rad.getPolyline(mxn.util.milesToKM(radius), '990066');
      mapstraction.addPolyline(poly);
    }

</script>
</head>
<body onload="create_map()">
    <div id="mymap"></div>
    <form onSubmit="geocode_form();return false;">
      <input type="text" id="keyword" name="keyword" size="25" /> within 
      <select name="radius" id="radius">
        <option value="1">1 mi</option>
        <option value="5" selected>5 mi</option>
        <option value="10">10 mi</option>
        <option value="25">25 mi</option>
      </select>
      of <input type="text" id="loc" name="loc" size="25" />
      <input type="submit" value="Go" />
    </form>
</body>
</html>
